<template>
  <div class="answer-list">
    <div class="a-n-wrap">
      <div class="crumbs">
        <nuxt-link to="/">
          首页
        </nuxt-link>
        <em />
        <span>
          问答
        </span>
      </div>
      <ul class="consult">
        <li @click="consultation">
          <img src="~assets/img/question/card0.png" alt="" class="sp0">
        </li>
        <li>
          <img src="~assets/img/question/card1.png" alt="" class="sp1">
        </li>
        <li @click="consultation">
          <img src="~assets/img/question/card2.png" alt="" class="sp2">
        </li>
        <li @click="consultation">
          <img src="~assets/img/question/card3.png" alt="" class="sp3">
        </li>
      </ul>
      <Screen @classId="getData" />
    </div>
    <div class="answer-list-wrap">
      <div v-customLoading="loading" class="answer-list-content">
        <div v-if="question.length" class="answer-list-box">
          <AnswerList v-for="item in question" :key="item.content_id" :question-data="item" @classId="getData" />
          <Pager :page-config="pageConfig" :home-tab-name="classId" @changeCurrentPage="changeCurrentPage" />
        </div>
        <div v-if="question.length===0" class="answer-noData">
          <div class="answer-noData-content">
            <img src="~assets/img/no-date.png" alt="">
            <div class="answer-noData-content-text">
              这里什么都没有~
            </div>
          </div>
        </div>
      </div>
      <div class="answer-list-doctor">
        <div class="answer-content-doctor-title">
          <div class="answer-content-doctor-left">
            <div class="answer-content-doctor-left-icon" />
            <div class="answer-content-doctor-left-text">
              名医榜
            </div>
          </div>
          <div class="answer-content-doctor-right" @click="jumpDoctorList">
            <div class="answer-content-doctor-right-text">
              更多
            </div>
            <div class="answer-content-doctor-right-icon" />
          </div>
        </div>
        <div v-for="item in doctorData" :key="item.user_id" class="answer-content-doctor-list">
          <DoctorList :datas="item" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Screen from '@/components/screenTwo'
import DoctorList from '@/components/doctorList/answer.vue'
import AnswerList from '@/components/answerList'
import { getDoctorData, getQuestionList } from '@/api/answer'
import Pager from '@/components/pagerTwo'
import Bus from '@/utils/Bus'
export default {
  components: {
    Screen,
    DoctorList,
    AnswerList,
    Pager
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [doctorData, questionData] = await Promise.all([
      getDoctorData('intelligent', 'asc', 1, 5).then((res) => {
        return res.data
      }),
      getQuestionList(query.page ? query.page : 1, 8, query.class_id).then(res => {
        return res
      })
    ])
    return {
      doctorData,
      questionData
    }
  },
  data() {
    return {
      question: [],
      classId: '',
      pageConfig: {
        pageNo: this.$route.query.page ? Number(this.$route.query.page) : 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      },
      projectName: '',
      doctorDatas: [
        {
          user_id: 0,
          user_name: '唐勇',
          user_position: '主任医师',
          workingYears: '从业10年',
          user_photo: 'http://rongcat-static.oss-cn-beijing.aliyuncs.com/pc_question_doctor/Tangyong.jpg',
          user_type: 'doctor'
        },
        {
          user_id: 1,
          user_name: '赵延勇',
          user_position: '主任医师',
          workingYears: '从业15年',
          user_photo: 'http://rongcat-static.oss-cn-beijing.aliyuncs.com/pc_question_doctor/Zhaoyanyong.jpg',
          user_type: 'doctor'
        },
        {
          user_id: 2,
          user_name: '潘博',
          user_position: '主任医师',
          workingYears: '从业11年',
          user_photo: 'http://rongcat-static.oss-cn-beijing.aliyuncs.com/pc_question_doctor/Panbo.jpg',
          user_type: 'doctor'
        }, {
          user_id: 3,
          user_name: '李发成',
          user_position: '主任医师',
          workingYears: '从业12年',
          user_photo: 'http://rongcat-static.oss-cn-beijing.aliyuncs.com/pc_question_doctor/Lichengfa.jpg',
          user_type: 'doctor'
        }, {
          user_id: 4,
          user_name: '穆大力',
          user_position: '主任医师',
          workingYears: '从业13年',
          user_photo: 'http://rongcat-static.oss-cn-beijing.aliyuncs.com/pc_question_doctor/Mudali.jpg',
          user_type: 'doctor'
        }
      ],
      loading: false
    }
  },
  computed: {

  },
  created() {
    this.pageConfig.total = this.questionData.meta.total
    this.pageConfig.pageTotal = this.questionData.meta.last_page
    this.question = this.questionData.data
    // this.doctorOneData()
  },
  mounted() {

  },
  destroyed() {

  },
  methods: {
    consultation() {
      Bus.$emit('open')
    },
    doctorOneData() {
      this.question.forEach(item => {
        if (item.answer !== null) {
          var str = item.answer.user.user_id + ''
          item.answer.user = this.doctorDatas[(str.substring(str.length - 1) * 1) % 5]
        }
      })
    },
    getData({ id, name }, page) {
      this.loading = true
      let p = null
      if (page) {
        p = page
      } else {
        p = 1
      }
      if (Array.isArray(name)) {
        this.projectName = name[name.length - 1]
      } else {
        this.projectName = name
      }
      this.pageConfig.pageNo = p
      const query = {
        class_name: this.$route.query.class_name ? this.$route.query.class_name : undefined,
        class_id: this.$route.query.class_id ? this.$route.query.class_id : undefined,
        page: p
      }
      if (id) {
        query.class_id = id
        query.class_name = name
      }
      this.$router.push({ query: query })
      getQuestionList(p, 8, query.class_id).then(res => {
        this.question = res.data
        // this.doctorOneData()
        this.pageConfig.total = res.meta.total
        this.pageConfig.pageTotal = res.meta.last_page
        this.loading = false
      })
    },
    changeCurrentPage(page) {
      this.pageConfig.pageNo = page
      this.getData(this.classId, page)
    },
    jumpDoctorList() {
      this.$router.push(`/doctor`)
    }
  },
  head() {
    return {
      title: `${this.projectName ? `${this.projectName}最新问答_容猫整形网` : '最新问答_容猫整形网'}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `${this.projectName ? `${this.projectName}整形最新问答，提供全面准确的整形答疑信息。容猫美容整形网` : '整形最新问答，提供全面准确的整形答疑信息。容猫美容整形网'}`
        }, {
          name: 'keywords', content: `${this.projectName ? `${this.projectName}问答` : '问答'}`
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/product`
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.answer-list {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  .a-n-wrap {
    width: 1190px;
    margin: 0 auto 10px;
    .consult {
      list-style: none;
      display: flex;
      margin: 0 -5px;
      padding: 0 0 20px 0;
      li {
        flex-shrink: 0;
        width: 25%;
        margin: 0;
        padding: 0 5px;
      }
      img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px;
        overflow: hidden;
        &.sp0 {
          cursor: pointer;
          box-shadow: 0 0 24px 4px rgba(255, 173, 63, 0.5);
        }
        &.sp1 {
          box-shadow: 0 0 24px 4px rgba(250, 109, 93, 0.5);
        }
        &.sp2 {
          cursor: pointer;
          box-shadow: 0 0 24px 4px rgba(145, 153, 252, 0.5);
        }
        &.sp3 {
          cursor: pointer;
          box-shadow: 0 0 24px 4px rgba(74, 161, 255, 0.5);
        }
      }
    }
    .crumbs {
      display: flex;
      align-items: center;
      height: 54px;
      line-height: 54px;
      padding: 0 30px;
      span {
        color: #504cff;
      }
      em {
        height: 6px;
        width: 6px;
        border-top: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* IE 9 */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg);
        margin: 0 10px 0 6px;
      }
    }
  }
  .answer-list-wrap {
    width: 1190px;
    margin: 0 auto;
    padding-bottom: 30px;
    overflow: hidden;
    display: flex;
  }
}
.answer-list-doctor {
  position: relative;
  flex-shrink: 0;
  width: 340px;
  height: 646px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 0 16px;
  margin-left: 10px;
  .answer-content-doctor-title {
    display: flex;
    justify-content: space-between;
    margin-top: 17px;
  }
  .answer-content-doctor-left {
    display: flex;
    align-items: center;
    .answer-content-doctor-left-icon {
      width: 12px;
      height: 14px;
      background: url("~assets/img/doctor-icons.png") center center no-repeat;
      background-size: 100% 100%;
    }
    .answer-content-doctor-left-text {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      line-height: 22px;
      margin-left: 8px;
    }
  }
  .answer-content-doctor-right {
    display: flex;
    align-items: center;
    cursor: pointer;
    .answer-content-doctor-right-text {
      font-size: 16px;
      font-weight: 500;
      color: #d8d8d8;
      line-height: 22px;
    }
    .answer-content-doctor-right-icon {
      width: 8px;
      height: 8px;
      background: url("~assets/img/more-icon.png") center center no-repeat;
      background-size: 100% 100%;
      margin-left: 4px;
    }
  }
  .answer-content-doctor-list {
    margin-top: 16px;
  }
}
.answer-list-box {
  flex-shrink: 0;
  width: 840px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 0 20px 20px 20px;
}
.answer-noData {
  width: 840px;
  height: 970px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  position: relative;
  .answer-noData-content {
    width: 242px;
    height: 210px;
    position: absolute;
    left: 50%;
    top: 150px;
    margin-left: -121px;
    > img {
      width: 242px;
      height: 191px;
    }
    .answer-noData-content-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 20px;
      text-align: center;
    }
  }
}
</style>
